import { ComponentProps, Mut, VueComponent } from "vue3-oop";
import { Collapse,CollapsePanel,FormItem, InputNumber,Select,SelectOption,Tabs,TabPane,Button,RadioGroup,RadioButton } from 'ant-design-vue';
import { FormData, WidgetItem } from '@/components/FormDesigner/types';
import { GRID,STATUS_OPTIONS } from './attr-grid'
import CfgBasic from '../_common/cfg-basic'
import CfgLayout from '../_common/cfg-layout'

interface IProps {
  formData: FormData,
  widgetItem: WidgetItem
}
export default class CfgGrid extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    formData: {},
    widgetItem: {}
  }

  @Mut() state = {
    layoutWinSize: this.props.formData.winSize,
    activePanel: ['BASIC','LAYOUT','GRID']
  }

  render(){
    const { formData,widgetItem } = this.props;
    const attr = widgetItem[widgetItem.type] as GRID

    return(
      <Collapse
        activeKey={this.state.activePanel}
        onChange={(newActiveKey)=>{this.state.activePanel = newActiveKey as string[]}}
      >
        <CollapsePanel header='基本属性' key='BASIC' >
          <CfgBasic widgetItem={widgetItem} />
        </CollapsePanel>
        <CollapsePanel header='布局属性' key='LAYOUT' >
          <CfgLayout formData={formData} widgetItem={widgetItem} />
          <FormItem label="默认状态">
            <Select value={attr.layout_status} onChange={(value)=>{attr.layout_status = value as any}}>
              {STATUS_OPTIONS.map((item)=>(<SelectOption value={item.value}>{item.label}</SelectOption>))}
            </Select>
          </FormItem>
        </CollapsePanel>
        <CollapsePanel header='栅格属性' key='GRID' >
          <FormItem label="默认宽度">
            <InputNumber
              size='small' min={1} max={24} addon-after="格"
              value={attr.defaultSpan}
              onChange={(value) => { attr.defaultSpan = Number(value) }}
            />
          </FormItem>
          <FormItem label="标签宽度">
            <InputNumber style={{width:'100%'}}
              size='small' 
              value={formData.labelWidth} 
              min={50} 
              onChange={(value)=>{formData.labelWidth=Number(value)}} 
              addon-after="px"
            />
          </FormItem>
          <FormItem label="标签对齐">
            <RadioGroup 
              size='small' 
              value={formData.labelAlign}
              onChange={(event)=>{formData.labelAlign=event.target.value}}
            >
              <RadioButton value='left' >左</RadioButton>
              <RadioButton value='right' >右</RadioButton>
            </RadioGroup>
          </FormItem>
          <Collapse
            activeKey={['GUTTER']}
          >
            <CollapsePanel header='组件间隔' key='GUTTER' >
              <Tabs
                size="small"
                type="card"
                activeKey={this.state.layoutWinSize}
                onChange={(value)=>{this.state.layoutWinSize = value as any}}
              >
                {{
                  leftExtra: ()=>(<Button size="small" onClick={()=>{this.state.layoutWinSize=formData.winSize}} style={{marginRight:'10px'}}>当前</Button>),
                  default: ()=>Object.keys(attr.gutter[0]).map((winSize)=>{
                    return (<TabPane key={winSize} tab={winSize.toUpperCase()}>
                      <FormItem label="水平间隔">
                        <InputNumber 
                          size='small' min={0} addon-after="px"
                          value={(attr.gutter[0] as any)[winSize]} 
                          onChange={(value)=>{(attr.gutter[0] as any)[winSize]=Number(value)}}
                        />
                      </FormItem>
                      <FormItem label="垂直间隔">
                        <InputNumber 
                          size='small' min={0} addon-after="px"
                          value={(attr.gutter[1] as any)[winSize]} 
                          onChange={(value)=>{(attr.gutter[1] as any)[winSize]=Number(value)}}
                        />
                      </FormItem>
                    </TabPane>)
                  })
                }}
              </Tabs>                    
            </CollapsePanel>
          </Collapse>
        </CollapsePanel>
      </Collapse>
    )
  }
}